require('./Helper.js');

;(function($, EchartsHelper) {
	var _global;

	var defaults = {
			type: 'bar',
			page: 'all',
			day: 30,
			charSet: {
				yAxis: {
					show: true,
				},
				xAxis: {
					axisLabel:{
						interval:0,
						rotate:40
					}
				},
				grid: {
		    		left: '5%',
		    		top: '5%',
		    		right: '2%'
		    	},
			}
	}
	Array.prototype.indexOf = function(val) {
		for(let index = 0; index < this.length; index++) {
			if(this[index] === val) return index;
		}
		return -1;
	}
	Array.prototype.remove = function(val) {
		let index = this.indexOf(val);
		if(index > -1) {
			this.splice(index, 1)
		}
	}
	function ChartClass(element, options) {
       this.element = element;
       this.settings = $.extend(true, {}, defaults, options);
       this._defaults = defaults;
       this.type = this.settings.type;
       this.day = this.settings.day;
       this.page = this.settings.page;
       
	}
	ChartClass.prototype.init = function() {
		var that = this, charSet;
		if(this.type === 'bar') {
			this.createBar()
		}
		if(this.type === 'line') {
			this.createLine()	
		}
		if(this.day === 90) {
			this.settings.charSet.xAxis.axisLabel.interval = 3
		}
		if(this.day === 180) {
			this.settings.charSet.xAxis.axisLabel.interval = 15
		}
		let charConfig = this.settings.charSet;
		let my = new EchartsHelper(this.element,charConfig);
		my.create()

	}

	ChartClass.prototype.createBar = function() {
		let chartData = this.settings.data;
		let chartName = this.settings.name;
		if(chartData.hasOwnProperty('downloadPercentum')) {
			let series = [], barDownload = {
						name: chartName[0],type: 'bar',data: chartData.downloadPercentum,barWidth: 4,stack: '关键词'
					}, barOther = {
						name: chartName[1],type: 'bar',data: chartData.otherPercentum,stack: '关键词'
					};
			series[0] = barDownload, series[1] =  barOther;
			let legend = {
				data: []
			};
			series.forEach(function(v) {
				legend.data.push(v.name)
			});			
			let yAxis = {
				axisLabel: {  
                  show: true,  
                  interval: 'auto',  
                  formatter: '{value} %'  
                },
               } 	
			this.settings.charSet.xAxis.data = chartData.timeData, this.settings.charSet.series = series;
			this.settings.charSet.legend = legend;
			this.settings.charSet.yAxis.axisLabel = yAxis.axisLabel;
			this.settings.charSet.yAxis.min = 0;
			this.settings.charSet.yAxis.max = 100;
		}
	}

	ChartClass.prototype.changeType = function(type) {
		let that = this;
		this.type = type;
		this.init();
	}

    ChartClass.prototype.createLine = function() {
    	let chartData = this.settings.data;
    	let chartName = this.settings.name;
    	let yAxis = {type: 'value'};
    	if(chartData.hasOwnProperty('downloadPercentum')) {
			let series = [{
				data: chartData.downloadData,
	    		type: 'line',
	    		name: chartName[0],
			}];
			let legend = {
				data: []
			};
			series.forEach(function(v) {
				legend.data.push(v.name)
			})
			
			this.settings.charSet.yAxis = yAxis;
			this.settings.charSet.series = series;
			this.settings.charSet.legend = legend;
    	}
    	if(chartData.hasOwnProperty('seriesData')) {
    		let length = chartName.length;
    		let series =[];
    		let legend = {
				data: []
			};
    		for(let index = 0; index < length; index++) {
    			let name = chartName[index];
    			legend.data.push(name);
    			let data = chartData.seriesData[name];
    			let obj = {
    				type: 'line',
    				name: name,
    				data: data
    			};
    			
    			series.push(obj);	
    		}
    		
    		series[0].type = 'line';
    		this.settings.charSet.series = series;
    		this.settings.charSet.legend = legend;
    	}
    	this.settings.charSet.xAxis.data = chartData.timeData;
    	
    	
    }


    ChartClass.prototype.changeTime = function(day) {
    	
    	this.day = day;
    	console.log(this.day);
    }
    
    ChartClass.prototype.createCheckbox = function(container) {
    	let that = this;
    	let charsetName = this.settings.name;
    	charsetName.map(function(currentValue, index, arr) {
    		let $label = $('<label></label').text(currentValue);
    		let $check = $('<input type="checkbox"/>').prependTo($label).val(currentValue).prop({
    			checked: true,
    		});
    		$label.appendTo($(container));
    		$check.bind('click', function() {
    			let value = $(this).val();
    			if($(this).is(':checked') == true){
    				that.checkboxChecked(value);
            	}else {
            		that.cancelChecked(value)
            	}
    			
    		})
    	})

    }

    ChartClass.prototype.checkboxChecked = function(val) {
    	console.log(val);
    	let index = this.settings.name.indexOf(val);
    	if(index === -1) {
    		this.settings.name.push(val);
    	}
    	this.init()
    }

    ChartClass.prototype.cancelChecked = function(val) {
    	this.settings.name.remove(val);
    	this.init();
    }
	_global = (function(){ return this || (0, eval)('this'); }());
    !('ChartClass' in _global) && (_global.ChartClass = ChartClass);


}(jQuery, EchartsHelper))